window.onload = function () {
    //初始化页面功能
    //搜索
    this.search();
    //轮播图
    this.banner();
    //倒计时
    this.downTime();
}

var search = function () {
    //1.页面初始化的时候，距离顶部距离是0的时候，透明度为0  修改为rgba就可以了。
    //2.页面滚动的时候，距离顶部的距离变大，透明度变大
    //3.当滚动距离超过了轮播图的距离，保持不变

    //获取dom元素
    var search = document.querySelector(".jd_search_box");
    var banner = document.querySelector('.jd_banner');
    var height = banner.offsetHeight;

    //监听滚动事件
    window.onscroll = function () {
        //当前页面滚动的距离
        var top = document.documentElement.scrollTop || this.document.body.scrollTop
        var opacity = 0;
        if (top > height) {
            //3.当滚动距离超过了轮播图的距离，保持不变
            opacity = 0.85

        } else {
            //2.页面滚动的时候，距离顶部的距离变大，透明度变大
            opacity = 0.85 * (top / height)
            console.log(opacity);
        }
        //设置opacity给search盒子
        search.style.background = 'rgba(216,80,92,' + opacity + ')'
    }

}

/*轮播图*/
function banner() {
    /*
     * 1.自动的滚动起来    （定时器，过渡）
     * 2.点随之滚动起来     （改变当前点元素的样式）
     * 3.图片滑动           （touch事件）
     * 4.当不超过一定的滑动距离的时候  吸附回去  定位回去     （一定的距离  1/3  屏幕宽度  过渡）
     * 5.当超过了一定的距离的时候    滚动  到上一张 或 下一张  （一定的距离  1/3  屏幕宽度  过渡）
     * */

    /*获取到dom对象*/
    /*banner*/
    var banner = document.querySelector('.jd_banner');
    /*屏幕的宽度*/
    var w = banner.offsetWidth;
    /*图片盒子*/
    var imageBox = banner.querySelector('ul:first-child'); /*querySelector只支持有效的css选择器*/
    /*点盒子*/
    var pointBox = banner.querySelector('ul:last-child');
    /*所有的点*/
    var points = pointBox.querySelectorAll('li');


    /*添加过渡*/
    var addTransition = function () {
        imageBox.style.webkitTransition = "all .2s"; /*兼容*/
        imageBox.style.transition = "all .2s";
    };
    /*删除过渡*/
    var removeTransition = function () {
        imageBox.style.webkitTransition = "none"; /*兼容*/
        imageBox.style.transition = "none";
    };
    /*改变位子*/
    var setTranslateX = function (translateX) {
        imageBox.style.webkitTransform = "translateX(" + translateX + "px)";
        imageBox.style.transform = "translateX(" + translateX + "px)";
    };


    /*1.自动的滚动起来    （定时器，过渡）*/
    var index = 1;
    var timer = setInterval(function () {
        /*箱子滚动*/
        index++;
        /*定位  过渡来做定位的  这样才有动画*/
        /*加过渡*/
        addTransition();
        /*改变位子*/
        setTranslateX(-index * w);

    }, 1000);

    /*绑定一个过渡结束事件*/
    imageBox.addEventListener("transitionend", function () {
        console.log('transitionEnd');
        if (index >= 9) {
            index = 1;
            /*做定位*/
            /*加过渡*/
            removeTransition();
            /*改变位子*/
            setTranslateX(-index * w);
        } else if (index <= 0) {
            index = 8;
            /*加过渡*/
            removeTransition();
            /*改变位子*/
            setTranslateX(-index * w);
        }
        /*index 1-8  索引范围*/
        /*point 0-7 */
        setPoint();
    });

    /*2.点随之滚动起来     （改变当前点元素的样式）*/
    var setPoint = function () {
        /*把所有点的样式清除*/
        for (var i = 0; i < points.length; i++) {
            points[i].className = " ";
            /* points[i].classList.remove('now');*/
        }
        points[index - 1].className = "now";
    }

    /*3.图片滑动 touch事件）*/
    var startX = 0;
    var moveX = 0;
    var distanceX = 0;
    var isMove = false;

    imageBox.addEventListener('touchstart', function (e) {
        /*清除定时器*/
        clearInterval(timer);
        startX = e.touches[0].clientX;
    });
    imageBox.addEventListener('touchmove', function (e) {
        isMove = true;
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX; /*distanceX  值  正负*/

        /*算出当前图片盒子需要定位的位子*/
        console.log(distanceX);

        /*将要去做定位*/
        var currX = -index * w + distanceX;
        /*删除过渡*/
        removeTransition();
        /*改变位子*/
        setTranslateX(currX);



    });
    imageBox.addEventListener('touchend', function (e) {

        /*当超过了一定的距离的时候 */
        if (isMove && (Math.abs(distanceX) > w / 3)) {
            /*5.当超过了一定的距离的时候    滚动  到上一张 或 下一张  （一定的距离  1/3  屏幕宽度  过渡）*/
            if (distanceX > 0) {
                index--; /*向右滑  上一张*/
            } else {
                index++; /*向左滑 下一张*/
            }
            addTransition();
            setTranslateX(-index * w);
        }
        /*当不超过一定的滑动距离的时候*/
        else {
            /*4.当不超过一定的滑动距离的时候  吸附回去  定位回去     （一定的距离  1/3  屏幕宽度  过渡）*/
            addTransition();
            setTranslateX(-index * w);
        }

        /*重置*/
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;

        /*添加定时器*/
        clearInterval(timer);
        timer = setInterval(function () {
            /*箱子滚动*/
            index++;
            /*定位  过渡来做定位的  这样才有动画*/
            /*加过渡*/
            addTransition();
            /*改变位子*/
            setTranslateX(-index * w);
        }, 1000);
    });
}

/*倒计时*/
function downTime() {
    /*需要倒计时的时间*/

    var time = 5 * 60 * 60;
    var timer = null;

    /*操作dom*/
    var skTime = document.querySelector('.sk_time');
    /*所有的SPAN*/
    var spans = skTime.querySelectorAll('span');

    timer = setInterval(function () {
        if (time <= 0) {
            clearInterval(timer);
            return false;
        }
        time--;
        /*格式化*/
        var h = Math.floor(time / 3600);
        var m = Math.floor(time % 3600 / 60);
        var s = time % 60;

        console.log(h);
        console.log(m);
        console.log(s);

        spans[0].innerHTML = Math.floor(h / 10);
        spans[1].innerHTML = h % 10;

        spans[3].innerHTML = Math.floor(m / 10);
        spans[4].innerHTML = m % 10;

        spans[6].innerHTML = Math.floor(s / 10);
        spans[7].innerHTML = s % 10;

    }, 1000);


}